<template>
  <div id="app">
    <HeaderView v-if="isheadershow == true"></HeaderView>
    <div class="router-view-container">
      <router-view></router-view>
    </div>
    <FooterView v-if="isshow == true"></FooterView>
  </div>
</template>
<script>
import FooterView from "@/components/FooterView";
import HeaderView from "@/components/HeaderView";
export default {
  name: "App",
  data() {
    return {
      isshow: true,
      isheadershow:true
    };
  },
  components: { FooterView, HeaderView },
  created() {
    var userInfo = {
      openId: "18252000000",
      nickName: "王大仙",
      avatarUrl:
        "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlWxUibxQ/132",
    };
    var openId = userInfo.openId;
    localStorage.setItem("userInfo", JSON.stringify(userInfo));
    localStorage.setItem("openId", openId);
  },
  watch: {
    $route: {
      handler(to) {
        const showArr = ["/home", "/topic", "/category", "/cart", "/user"];
        const headerArr = ["/user"];

        if (showArr.includes(to.path)) {
          this.isshow = true;
        } else {
          this.isshow = false;
        }

        if (headerArr.includes(to.path)) {
          this.isheadershow = false;
        } else {
          this.isheadershow = true;
        }
      },
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #fff;
}
li {
  list-style: none;
}
</style>
